<template>
  <div class="todo-filter">
    <button
      v-for="option in filterOptions"
      :key="option.value"
      @click="$emit('update-filter', option.value)"
      :class="['filter-btn', { active: filter === option.value }]"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<script setup>
defineProps({
  filter: {
    type: String,
    default: 'all'
  }
})

const emit = defineEmits(['update-filter'])

const filterOptions = [
  { value: 'all', label: '全部' },
  { value: 'active', label: '未完成' },
  { value: 'completed', label: '已完成' }
]
</script>